<template>
  <el-form status-icon label-width="120px">
    <el-form-item label="学号">
      <el-input v-model="info.stuId" />
    </el-form-item>

    <el-form-item label="姓名">
      <el-input v-model="info.name" />
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="info.sex">
        <el-radio :label="0">男</el-radio>
        <el-radio :label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="电话">
      <el-input v-model.number="info.phone" />
    </el-form-item>

    <el-form-item label="省份">
      <el-select v-model="info.province" placeholder="选择你的高中所在地">
        <el-option v-for="item in province" :value="item" />
      </el-select>
    </el-form-item>

    <el-form-item label="学院">
      <el-select v-model="info.college" placeholder="选择你的学院">
        <el-option v-for="(item, index) in read" :value="item.college" @click.native="changeIndex(index)" />
      </el-select>
    </el-form-item>

    <el-form-item label="专业">
      <el-select v-model="info.major" placeholder="选择你的专业">
        <el-option v-if="indexOfRead >= 0" v-for="item in read[indexOfRead].major" :value="item" />
      </el-select>
    </el-form-item>

    <el-form-item class="info_submit">
      <el-button type="primary" @click="submitForm">报到</el-button>
      <el-button type="primary" plain @click="clearForm">清空</el-button>
    </el-form-item>
  </el-form>
</template>


<script>

import { ElMessage } from 'element-plus'

export default {
  name: 'test1',
  components: {

  },
  data() {
    return {
      indexOfRead: -1,
      province: ["河北省",
        "山西省",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "海南省",
        "四川省",
        "贵州省",
        "云南省",
        "陕西省",
        "甘肃省",
        "青海省",
        "台湾省",
        "内蒙古自治区",
        "广西壮族自治区",
        "西藏自治区",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "北京市",
        "天津市",
        "上海市",
        "重庆市",
        "香港特别行政区",
        "澳门特别行政区"],
      read: [{
        college: "计算机与信息安全学院",
        major: ["计算机科学与技术", "软件工程", "信息安全"]
      },
      {
        college: "商学院",
        major: ["市场营销", "管理学", "经济学"]
      },
      {
        college: "艺术与设计学院",
        major: ["美术", "数字媒体"]
      },
      {
        college: "机电工程学院",
        major: ["电气工程技术", "自动控制与仪表", "建筑智能化工程"]
      }],
      indexOfRead: -1,
      info: {
        stuId: '',
        name: '',
        sex: -1,
        phone: '',
        province: '',
        college: '',
        major: '',
      },
      empty: {
        stuId: '',
        name: '',
        sex: -1,
        phone: '',
        province: '',
        college: '',
        major: '',
      }
    }
  },
  methods: {
    submitForm() {
      for (let key in this.info) {
        console.log(key);
        if (this.info[key] != '' && this.info["sex"] === -1) {
          alert("请不要留空！");
          return;
        }
      }
      console.log(this.info);

      this.$axios
        .post("/api/add", this.info)
        .then((res) => {
          console.log(res);
          ElMessage({
            message: '报到成功',
            type: 'success',
          })
        })
        .catch((err) => {
          console.log(err);
        })

    },
    clearForm() {
      this.info = this.empty;
    },
    changeIndex(index) {
      this.indexOfRead = index;
      console.log(index);
      console.log(this.read[this.indexOfRead].major);
    }
  }
}
</script>

<style>
.el-form {
  width: 40%;
  margin: auto;
  margin-top: 100px;
  padding-right: 90px;
}

.el-select {
  width: 100%;
}
</style>
